<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2023-12-10 10:20:33
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2023-12-10 14:13:12
-->
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="productName" label="产品名称">
        <el-table-column prop="codeVal" label="台秤编号">
          <el-table-column prop="code1" label="物料名称"> </el-table-column>
        </el-table-column>
        <el-table-column prop="codeVal" label="35101810007">
          <el-table-column prop="code2" label="料数"> </el-table-column>
          <el-table-column prop="code3" label="需求数量Kg"> </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="productName" label="丹溪玉屏风颗粒清膏">
        <el-table-column prop="codeVal" label="是否在校验期内">
          <el-table-column prop="code4" label="包装规格"> </el-table-column>
          <el-table-column prop="code5" label="物料批号"> </el-table-column>
        </el-table-column>
        <el-table-column prop="codeVal">
          <template slot="header">
            <span style="font-size: 30px">□</span>是 <span style="font-size: 30px">□</span>否
          </template>
          <el-table-column prop="codeVal" label-class-name="no-right-border">
            <el-table-column prop="code6">
              <template slot="header">
                <div>总整件毛重</div>
                <div>(A)Kg</div>
              </template>
            </el-table-column>
            <el-table-column prop="code7">
              <template slot="header">
                <div>总整件皮重</div>
                <div>(B)Kg</div>
              </template>
            </el-table-column>
            <el-table-column prop="code8">
              <template slot="header">
                <div>总整件净重</div>
                <div>(C)Kg</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="productName" label="产品批号">
        <el-table-column prop="codeVal" label="使用前是否校验">
          <el-table-column prop="codeVal" label-class-name="no-right-border" label="数量(Kg)" header-align="right">
            <el-table-column prop="code9">
              <template slot="header">
                <div>零头毛重</div>
                <div>(E)Kg</div>
              </template>
            </el-table-column>
            <el-table-column prop="code10">
              <template slot="header">
                <div>零头皮重</div>
                <div>(F)Kg</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="productName" label="20231101Y">
        <el-table-column prop="codeVal">
          <template slot="header">
            <span style="font-size: 30px">□</span>是 <span style="font-size: 30px">□</span>否
          </template>
          <el-table-column prop="codeVal" label-class-name="no-right-border">
            <el-table-column prop="code9">
              <template slot="header">
                <div>零头净重</div>
                <div>(G)Kg</div>
              </template>
            </el-table-column>
            <el-table-column prop="code10">
              <template slot="header">
                <div>净重(H)Kg</div>
                <div>H=C+G</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="codeVal" label="检查人">
          <el-table-column prop="codeVal" label-class-name="no-right-border">
            <el-table-column prop="code11">
              <template slot="header">
                <div>总件数</div>
                <div>(D)件</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="codeVal">
          <el-table-column prop="codeVal">
            <el-table-column prop="code12" label="是否符合" width="100">
              <template>
                <div class="flex f-x-c f-y-c">
                  <div class="circle yes">是</div>
                  <div class="circle no">否</div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="code13" label="备注"> </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="productName" label="操作">
        <el-button type="text">插入行</el-button>
        <el-button type="text" :style="{ color: '#F53F3F' }" @click="delMaterial(scope.$index, scope.row.id)"
          >删除</el-button
        >
      </el-table-column>
    </el-table>
    <div class="flex f-x-e f-y-c">
      <p>共3份/24条、8条/份</p>
      <el-pagination background layout="prev, pager, next,jumper" :total="9" :pageSize="3"> </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.createData()
  },
  methods: {
    createData() {
      const list = []
      for (let i = 1; i < 6; i++) {
        const item = {}
        for (let k = 1; k < 12; k++) {
          item[`code${k}`] = i
        }
        list.push(item)
      }
      this.tableData = list
    }
  }
}
</script>

<style lang="less" scoped>
.el-table--border /deep/ .el-table__cell.no-right-border {
  border-right: none !important;
}
.circle {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  color: #00f;
  border: 1px solid #00f;
  text-align: center;
  &.no {
    color: #f00;
    border-color: #f00;
    margin-left: 10px;
  }
}
</style>